<template>
  <div class='mainbox'>
    <img
      class="imgbox"
      src="../assets/background.png"
    />
    <div class="textbox">
      <p class="textboxp1">欢迎订阅中国报刊</p>
      <p class="textboxp2">Welcome Subscription</p>
    </div>
    <!--    <div class='logbox'>
      <div class='login'>
		  <p class="logintext">请使用微信扫码登录扫码登录更便捷</p>
		  <div id="qrode"></div>
		  <p style="margin-top: 30px;text-align: center;">点击右上角可切换账号登录或手机号登录</p>
	  </div> -->

    <div class='logbox'>
      <div class='login'>
        <div class="inputBox">
          <img
            :src="qrStatus?require('@/assets/textInput.png'):require('@/assets/qrInput.png')"
            alt=""
            @click="changeInput"
          >
        </div>
        <p
          class="logintext"
          style="margin-bottom: 0;"
        >请使用微信扫码登录扫码登录更便捷</p> 
        <div
          class="textInput"
          v-if="!qrStatus"
        >
          <el-form
            :model="userinfo"
            :rules="rule"
            ref="logform"
            label-width="120px"
          >
            <el-row>
              <el-form-item
                label="账号:"
                prop="account"
              ><el-input
                  type="text"
                  v-model="userinfo.account"
                  auto-complete="off"
                  placeholder="账号"
                ></el-input></el-form-item>
            </el-row>
            <el-form-item
              label="密码:"
              prop="password"
            ><el-input
                type="password"
                v-model="userinfo.password"
                auto-complete="off"
                placeholder="密码"
              ></el-input></el-form-item>
            <el-form-item
              label="重复密码:"
              prop="password2"
              v-if="registStatus"
            ><el-input
                type="password"
                v-model="userinfo.password2"
                auto-complete="off"
                placeholder="重复密码"
              ></el-input></el-form-item>
          </el-form>
          <el-row style="display: flex;justify-content: center;align-items: center;">
            <el-button @click="submitForm">{{ loginText }}</el-button>
            <!-- <el-button @click="regist">{{ '注册' }}</el-button> -->
          </el-row>
          <div class="tiptext">
            <span
              @click="toLogin"
              v-if="registStatus"
            >已有账号，去登录</span>
            <span
              @click="toRegist"
              v-else
            >没有账号，申请注册</span>
          </div>
        </div>
        <div
          class="qrInput"
          v-else
        >
          <img :src="codeImg" class="qrcode" >
        </div>
        <p style="margin-top: 20px;text-align: center;">点击右上角可切换账号登录或手机号登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import { login, regist, rqCode, getUserInfo} from '../api/basisMG';
export default {
  name: 'main-index',
  data() {
    return {
      qrStatus: false,
      registStatus: false,
      loginText: '登录',
      logining: true,
      sceneStr: '',
      codeImg: '',
      t: '',
      userinfo: {
        password: '',
        account: '',
        password2: ''
      },
      rule: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        password2: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    changeInput() {
      this.qrStatus = !this.qrStatus
      if (this.qrStatus) {
        rqCode().then(data => {
          if (data.code == 10000) {
                this.sceneStr = data.data.sceneStr;
                console.log(data);
                this.codeImg = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + data.data.ticket;
                this.t = setInterval(() => {
                  this.getOpenId();
                }, 1500);
            }
        })
      }
    },

    // 扫码成功，获取用户openId=>为获取用户信息做准备
    async getOpenId(){
      getUserInfo(this.sceneStr).then(data => {
        if (data.code == 10000) {
            console.log(data.data);
            clearInterval(this.t);
            if(data.data.username == '' || data.data.username == null) {
              localStorage.setItem('user', "微信用户")
            }
            localStorage.setItem('token', data.data.accessToken)
            this.$emit('set-name', localStorage.getItem('user'))
            this.$router.push('/pages/select')
        }
      });
    },


    async submitForm() {
      if (this.registStatus) {
        await this.$refs.logform.validate()
        await regist(this.userinfo)
        const res = await this.$alert('您已注册，是否直接登录', '提示', {
          confirmButtonText: '确定',
          confirmButtonClass: 'tipsConfirm'
        });
        if (res === 'confirm') {
          const res = await login(this.userinfo)
          localStorage.setItem('token', res.data.accessToken)
          localStorage.setItem('user', res.data.username)
          this.$emit('set-name', res.data.username)
          this.$router.push('/pages/select')
        }
      } else {
        await this.$refs.logform.validate()
        const res = await login(this.userinfo)
        localStorage.setItem('token', res.data.accessToken)
        localStorage.setItem('user', res.data.username)
        this.$emit('set-name', res.data.username)
        this.$router.push('/pages/select')
      }
    },
    toLogin() {
      this.registStatus = false
      this.rule.password2 = []
      this.loginText = '登录'
    },
    toRegist() {
      this.registStatus = true
      this.rule.password2 = [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
      this.loginText = '注册'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  text-align: right;
}
.qrInput {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrcode {
  width: 200px !important;
  height: 200px !important;
}
.mainbox {
  width: 100%;
  height: 99%;
  margin: 0;
  padding: 0;
  position: relative;
  .inputBox {
    position: absolute;
    right: 0;
    top: 0;
    width: 64px;
    height: 64px;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
      border-top-right-radius: 10px;
    }
  }
}
.imgbox {
  width: 100%;
  height: 100%;
  margin: 0;
  /* opacity: 0.9; */
  position: static;
  float: left;
}
.logbox {
  width: 380px;
  height: 430px;
  padding: 5% 15% 0 52%;
  position: absolute;
  float: right;
}
.login {
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  position: relative;
  .textInput {
    .tiptext {
      margin-top: 5px;
      text-align: center;
      font-size: 10px;
      color: #aa0000;
      text-decoration: underline;
      span {
        cursor: pointer;
      }
    }
  }
}

.textbox {
  position: absolute;
  float: left;
  margin: 15% 50% 0 15%;
}
.textboxp1 {
  font-size: 50px;
  font-family: 宋体;
  text-color: #fff;
  margin: 0;
}
.textboxp2 {
  font-size: 40px;
  font-family: 宋体;
  margin: 0;
}
.logintext {
  text-align: center;
  font-size: 18px;
  padding: 10% 20% 10% 20%;
}
#loginimg {
  width: 40%;
  height: 40%;
  padding: 5% 30% 5% 30%;
}
.el-input {
  width: 200px;
}
.el-form-item {
  color: black;
  /* margin-left: 20%; */
}
.el-button {
  color: #fff;
  background-color: #aa0000;
}
.el-button:focus,
.el-button:hover {
  color: #fff;
  background-color: #aa0000;
}
</style>
